﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="../qschart/mstar_qs_chart_1.2.css" type="text/css" rel="stylesheet"/>
        <style>
            body {
                font-size: 11px;
                font-family: tahoma;
            }
            
            input {
                font-size: 11px;
            } .inputTxt {
                width: 50px;
                border-color: #6B6B6B #B9B9B9 #DDDDDD;
                border-style: solid;
                border-width: 1px;
                color: #333333;
                display: inline;
                font-size: 93%;
                margin: 4px 5px 0;
                padding: 2px 0 2px 2px;
            } .btn {
                background-color: #FFFFFF;
                border-color: #6B6B6B #B9B9B9 #DDDDDD;
                border-style: solid;
                border-width: 1px;
                color: #333333;
                display: inline;
                margin: 4px 5px 0 -1px;
                padding: 2px 4px;
                text-decoration: none;
                width: auto;
            } .ctrtable td {
                border-right: 1px solid #999999;
                border-bottom: 1px solid #999999;
                padding: 2px 10px;
            }
        </style>
        <script>
            var isDebug = false
        </script>
        <script src="../lib/jquery.js" type="text/javascript">
        </script>
        <script src="../lib/jquery.json.min.js" type="text/javascript">
        </script>
        <script src="../lib/migratory-jslib.js" type="text/javascript">
        </script>
        <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->
        <script src="../qschart/mstar_qs_chart_1.2.js" type="text/javascript"></script>
       
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
        <div id="chart" style="position: relative">
        </div>
        <div style="width:100%;">
            <table cellpadding=0 cellspacing=0 class="ctrtable">
                <tr>
                    <td>
                        Width:<input type="text" id="w" value="" class="inputTxt"/> Height:<input type="text" id ="h" value="" class="inputTxt"/><input type=button onclick="changeSize()" value="change outsize" class="btn"/>
                    </td>
                    <td>
                        Symbol:<input type="text" id="s" value="" class="inputTxt"/>(such as:XNAS:MSFT)<input type=button onclick="changeMainTicker()" value="change main Ticker" class="btn"/>(don't change the chart state)
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type=button onclick="saveChart()" value="save the state of chart" class="btn"/>
                        <div id = "configure">
                        </div>
                    </td>
                    <td>
                        recur state of chart:<input type=button onclick="initChart()" value="redraw chart" class="btn"/>
                    </td>
                </tr>
            </table>
        </div>
        <script>
            var debug = true; /// it will get data api in dev server.
            var culture = "en-US";
            var region = "USA";
            var mainTicker = "XNYS:IBM";
            var sw = 955, sh = 356;
            var statusConfig = {
                width: 800,
                height: 456
            };
            GB_ChartDataManager.dataUrls.intraday = "../quote.jsp?";
            GB_ChartDataManager.dataUrls.historical = "../getStockHistoricalData.jsp?";
            GB_ChartDataManager.dataUrls.fundamental = "../getFundamentalData.jsp?";
            GB_ChartDataManager.dataUrls.minutelyIntraday = "../getMinutelyIntradayData.jsp?";
            var ch1 = new RTChartComponent(mainTicker, region, culture);
			//ch1.setFillColors("pChart","ffeeee");
			ch1.switchShowLastLabel(false);
            ch1.initUIConfig({
                autoHeight: true
            }); // user default ui configure.
            ch1.Init("chart", "ch1", statusConfig);
            function changeSize(){
                var w = document.getElementById("w").value;
                var h = document.getElementById("h").value;
                var ww = parseInt(w);
                var hh = parseInt(h);
                if (!isNaN(ww) && !isNaN(hh)) {
                    if (ch1 != null) {
                        sw = ww;
                        sh = hh;
                        ch1.changeOutSize(ww, hh);
                    }
                }
            }
            
            function changeMainTicker(){
                var ticker = document.getElementById("s").value;
                if (ticker != "") {
                    if (ch1 != null) {
                        mainTicker = ticker;
                        ch1.acceptTicker(ticker);
                    }
                }
            }
            
            var conf = {};
            function saveChart(){
            
                if (ch1 != null) {
                    conf = ch1.saveConfig();
                    document.getElementById("configure").innerHTML = "<b>the chart state is saved, you can't click the redraw button recur the chart.</b>";
                }
                
            }
            
            function initChart(){
                ch1 = new RTChartComponent(mainTicker, region, culture);
                conf = ch1.Init("chart", "ch1", conf);
            }
        </script>
    </body>
</html>
